import { defineComponent, ref } from "vue";
import style from "./index.module.less";
import { Cascader, DropdownItem } from "vant";
import { dropCascadeItemProps } from "./types";
export default defineComponent({
  name: "",
  emits: ["open", "change", "update:modelValue"],
  props: dropCascadeItemProps,
  setup(_, { emit }) {
    const showPopup = ref(false);
    const itemRef = ref();
    return () => {
      return (
        <DropdownItem
          title={_.item.title}
          teleport={"body"}
          ref={itemRef}
          onOpen={() => {
            emit("open");
            showPopup.value = true;
          }}
        >
          <Cascader
            showHeader={false}
            modelValue={_.modelValue}
            options={_.item.data}
            onChange={(data) => {
              _.item.onChange && _.item.onChange(data);
              emit("update:modelValue", data.value);
              if (data.tabIndex == 1) {
                itemRef.value.toggle();
              }
            }}
          />
        </DropdownItem>
      );
    };
  },
});
